<!--
  @Descripttion：新增/编辑楼层
  @Author：zqy
  @Date：2022-12-06 19:10:43
  @Last Modified by：zqy
  @Last Modified time：2022-12-06 19:10:43
-->
<template>
  <inside-page :titles="titles" cancel-title="返回" @go-back="goBack">
    <template slot="button">
      <template v-if="!showType && editable">
        <el-button v-if="modifyBasic || !floorId" v-preventReClick v-loading="submiting" size="mini" type="primary" @click="submitForm">保存</el-button>
        <el-button v-else v-preventReClick v-loading="submiting" size="mini" type="primary" @click="modifyBasic = true">编辑基础信息</el-button>
      </template>
    </template>
    <div v-if="!submiting" class="mt20">
      <floor-type v-if="showType==='type'" :page-data="pageData" @change="handleTypeChange" />
      <floor-layout
        v-if="showType==='layout' && floorType"
        :visible.sync="showLayout"
        :layout-list="layoutList"
        @change="handleLayoutChange"
      />
      <div v-if="!showType">
        <basic-edit
          v-if="activeLayout && floorType"
          ref="refBasic"
          :floor-type="floorType"
          :layout-data="activeLayout"
          :floor-data="floorData"
          :page-data="pageData"
          :editable="!!modifyBasic"
          :readonly="!modifyBasic && !!floorId"
        />
        <template v-if="activeLayout && floorType && !!(floorId)">
          <ProductItemList v-if="activeLayout.type==='define_page_product'" :floor-id="floorId" :page-data="pageData" />
          <ItemList v-else :layout-data="activeLayout" :floor-id="floorId" :page-data="pageData" />
        </template>
      </div>
    </div>
  </inside-page>
</template>

<script>
import FloorType from './component/FloorType'
import FloorLayout from './component/FloorLayout'
import BasicEdit from './component/BasicEdit'
import ItemList from './component/ItemList'
import ProductItemList from './component/ProductItemList'
import { FLOOR_TYPE, FLOOR_LAYOUT } from './constData'
import { saveFloorBasicConfig } from '@/api/floorConf'

export default {
  name: 'FloorConfigEdit',
  components: {
    FloorType,
    FloorLayout,
    BasicEdit,
    ItemList,
    ProductItemList
  },
  filters: {
    filterLayoutType(val) {
      return FLOOR_TYPE[val] || ''
    }
  },
  props: {
    pageShow: {
      type: Boolean,
      default: false
    },
    pageData: {
      type: Object,
      default: () => {}
    },
    detail: {
      type: [Object, String],
      default: ''
    } // 当前编辑的楼层详细数据
  },
  data() {
    return {
      modifyBasic: false, // 楼层基础信息是否编辑状态
      submiting: false, // 是否操作加载中
      showType: 'type', // type 楼层类型， layout  布局
      floorType: '', // 楼层类型 FLOOR_TYPE
      floorLayout: '', // 楼层布局 FLOOR_LAYOUT
      floorData: ''// 当前楼层基础数据
    }
  },
  computed: {
    nowPageShow: {
      get() {
        return this.pageShow
      },
      set(val) {
        this.$emit('update:pageShow', val)
      }
    },
    titles() {
      const list = []
      if (this.pageData && ![0, 1, 2].includes(this.pageData.id)) {
        list.push('自定义页面配置')
        list.push(this.pageData.name + `(${this.pageData.type === 'product' ? '商品' : '组合'})`)
      } else {
        const name = ['APP', 'PAD', 'WEB'][this.pageData.id || 0]
        list.push(name + '主页配置')
      }
      let lastTitle = ''
      if (this.floorId) {
        const name = FLOOR_TYPE[this.floorType] || ''
        lastTitle = `楼层详细信息配置【${name}】`
      }
      if (this.showType === 'type') {
        lastTitle = '选择楼层类型'
      } else if (this.showType === 'layout') {
        lastTitle = '选择布局'
      } else {
        const name = FLOOR_TYPE[this.floorType] || ''
        lastTitle = `楼层详细信息配置【${name}】 `
      }
      list.push(`${this.floorId ? `编辑楼层【${this.floorData.name}】` : '新增楼层'} - ${lastTitle}`)
      return list
    },
    floorId() {
      return this.floorData.id || ''
    },
    // 布局列表
    layoutList() {
      let list = []
      if (this.floorType) {
        const pageType = ['app', 'pad', 'web'][this.pageData.id]
        list = FLOOR_LAYOUT.filter(v => {
          if (['home_page_fast_entrance', 'home_page_banner', 'home_page_navigation'].includes(this.floorType)) {
            return v.type === this.floorType && v.platform === pageType
          }
          return v.type === this.floorType
        })
      }
      return list
    },
    activeLayout() {
      let list = []
      if (this.floorType && this.floorLayout) {
        if ([0, 1, 2].includes(this.pageData.id)) {
          const platform = ['app', 'pad', 'web'][this.pageData.id]
          list = FLOOR_LAYOUT.filter(v => v.type === this.floorType && v.dictCode === this.floorLayout && v.platform === platform)
        } else {
          list = FLOOR_LAYOUT.filter(v => v.type === this.floorType && v.dictCode === this.floorLayout)
        }
      }
      return list.length ? list[0] : ''
    },
    layoutDetail() {
      if (this.floorType && this.floorLayout) {
        let list = []
        if ([0, 1, 2].includes(this.pageData.id)) {
          const platform = ['app', 'pad', 'web'][this.pageData.id]
          list = FLOOR_LAYOUT.filter(v => v.type === this.floorType && v.dictCode === this.floorLayout && v.platform === platform)
        } else {
          list = FLOOR_LAYOUT.filter(v => v.type === this.floorType && v.dictCode === this.floorLayout)
        }
        return list[0] || ''
      }
      return ''
    },
    editable() {
      // 是否可编辑基础楼层
      return !['home_page_banner', 'home_page_navigation'].includes(this.floorType)
    }
  },
  created() {
    this.floorData = this.detail || ''
    if (this.floorData && this.floorData.id) {
      this.floorType = this.floorData.type
      this.floorLayout = this.floorData.layOut
      this.showType = ''
    }
  },

  methods: {
    goBack() {
      if (!this.showType && !this.floorId) {
        this.showType = 'layout'
        return
      } else if (this.showType === 'layout') {
        this.showType = 'type'
        return
      }
      this.nowPageShow = false
    },
    // 确认选择楼层类型
    handleTypeChange(type) {
      this.floorType = type
      this.showType = 'layout'
      this.showLayout = true
    },
    // 确认选择布局类型
    handleLayoutChange(layout) {
      this.floorLayout = layout.dictCode
      this.showType = ''
    },
    submitForm() {
      this.$refs.refBasic.validateForm().then(data => {
        this.saveData(data)
      })
    },
    saveData(formData) {
      const { name, logoPic, isAnchor, isShowTitle, showType } = formData
      let gotoDTO = {}
      if (this.floorType === 'home_page_fast_entrance') {
        gotoDTO = formData.gotoDTO
        if (gotoDTO && gotoDTO.categoryDTOList) {
          const categoryDTOList = gotoDTO.categoryDTOList.map(v => {
            return {
              categoryId: v.categoryId,
              categoryName: v.categoryName
            }
          })
          gotoDTO.categoryDTOList = categoryDTOList
        }
      }
      const param = {
        layOut: this.floorLayout, // 布局类型
        type: this.floorType, // 所属楼层类型
        name,
        logoPic,
        isAnchor,
        isShowTitle,
        showType,
        referenceId: this.pageData.id
      }
      if (this.floorData && this.floorData.id) {
        param.id = this.floorData.id
      }
      this.submiting = true
      const data = { ...param, ...gotoDTO }
      saveFloorBasicConfig(data).then(res => {
        this.submiting = false
        if (res.success === 1) {
          this.$message.success(`${data.id ? '编辑' : '新增'}保存成功`)
          this.floorData = data.id ? data : { ...data, ...{ id: res.data }}
          this.$emit('success', !!data.id)
          this.modifyBasic = false
        }
      }).catch(() => {
        this.submiting = false
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  /deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
  .mt20{
    margin-top: 20px;
  }
  .alert-msg{
    color: #999;
  }
</style>
